<template>
  <div class="payment">
    <div class="time_down payment_group">
      请在
      <span class="red">半小时内</span>
      完成付款，否则系统自动取消订单
    </div>

    <van-cell-group class="payment_group">
      <van-cell title="订单编号" :value="orderS" />
      <van-cell title="实付金额">
        <span class="red">{{ (order.actualAmount * 100) | yuan }}</span>
      </van-cell>
    </van-cell-group>

    <div class="pay_way_group">
      <div class="pay_way_title">选择支付方式</div>
      <van-radio-group v-model="payWay">
        <van-cell-group>
          <!-- <van-cell>
            <template slot="title">
              <img src="../../../assets/images/ali_pay.png" alt="支付宝" width="82" height="29">
            </template>
            <van-radio name="ali"/>
          </van-cell>-->
          <van-cell>
            <template slot="title">
              <img
                src="../../../assets/images/wx_pay.jpg"
                alt="微信支付"
                width="113"
                height="23"
              />
            </template>
            <van-radio name="0" />
          </van-cell>
          <!-- <van-cell v-if="isSupport()">-->
          <van-cell v-if="false">
            <template slot="title">
              <img
                src="../../../assets/images/wxzf.jpg"
                alt="线下支付"
                width="113"
                height="23"
              />
            </template>
            <van-radio name="1" />
          </van-cell>
        </van-cell-group>
      </van-radio-group>
    </div>

    <van-button class="pay_submit" @click="pay" type="primary" bottomAction
      >去支付</van-button
    >
  </div>
</template>

<script>
import { Radio, RadioGroup, Dialog } from 'vant';
import { orderDetail, orderPrepay, setMemberLevelOnline } from '@/api/api';
import _ from 'lodash';

export default {
  name: 'payment',

  data() {
    return {
      payWay: '0',
      orderS: '',
      goodsId: '',
      payType: 0,
      order: {
        orderInfo: {},
        orderGoods: [],
      },
      orderId: 0,
      goodsInfo: {},
    };
  },
  created() {
    if (_.has(this.$route.query, 'goodsId')) {
      this.goodsId = this.$route.query.goodsId;
    }

    if (_.has(this.$route.query, 'payType')) {
      this.payType = this.$route.query.payType;
    }

    if (_.has(this.$route.query, 'orderId')) {
      this.orderId = this.$route.query.orderId;

      this.getOrder(this.orderId);
    }
  },

  methods: {
    // 是否支持线下付款，只有当订单为试机类型且订单状态为待付款的时候，才不支持线下支付
    isSupport() {
      //会员卡购买不支持线下
      if (
        this.goodsInfo &&
        this.goodsInfo.goods_type == 1 &&
        this.goodsInfo.name == '金牌会员年卡'
      ) {
        return false;
      }
      if (
        this.order.orderInfo.payType == 1 &&
        this.order.orderInfo.orderStatus == 101
      ) {
        return false;
      }
      return true;
    },
    getOrder(orderId) {
      let arr = new Array();
      arr.push(Number(orderId));
      orderDetail({
        orderIds: arr,
        payType: this.payType,
        goodsId: this.goodsId,
      }).then((res) => {
        this.order = res.data.data;
        this.orderS = res.data.data.orderInfos[0].orderSn;

        if (res.data.data.goodsInfo) {
          this.goodsInfo = res.data.data.goodsInfo;
        }
      });
    },
    pay() {
      if (this.payWay == '1') {
        let arr = new Array();
        arr.push(Number(this.orderId));
        // 对于货到付款，直接修改付款方式
        orderPrepay({
          orderIds: arr,
          payWay: Number(this.payWay),
          payType: Number(this.payType),
        })
          .then((res) => {
            //console.log(JSON.stringify(res));
            this.$router.push({ path: '/order/payment/sucess' });
          })
          .catch((err) => {
            console.log(JSON.stringify(err.data.errmsg));
          });
        return;
      }
      if (typeof WeixinJSBridge == 'undefined') {
        if (document.addEventListener) {
          document.addEventListener(
            'WeixinJSBridgeReady',
            onBridgeReady,
            false
          );
        } else if (document.attachEvent) {
          document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
          document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
        }
      } else {
        this.onBridgeReady();
      }
    },
    onBridgeReady() {
      let arr = new Array();
      arr.push(Number(this.orderId));
      orderPrepay({
        orderIds: arr,
        payWay: Number(this.payWay),
        payType: Number(this.payType),
      }).then((res) => {
        const Mfbank = JSON.parse(res.data.data.wcPayData);

        let that = this;
        WeixinJSBridge.invoke(
          'getBrandWCPayRequest',
          {
            appId: Mfbank.appId, //公众号名称，由商户传入
            timeStamp: Mfbank.timeStamp, //时间戳，自1970年以来的秒数
            nonceStr: Mfbank.nonceStr, //随机串
            package: Mfbank.package,
            signType: Mfbank.signType, //微信签名方式：
            paySign: Mfbank.paySign, //微信签名
          },
          function (res) {
            if (res.err_msg == 'get_brand_wcpay_request:ok') {
              // 使用以上方式判断前端返回,微信团队郑重提示：
              //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
              //判断是否是开通会员如果是将跳转到开通会员接口
              if (
                that.goodsInfo &&
                that.goodsInfo.goods_type == 1 &&
                that.goodsInfo.name == '金牌会员年卡'
              ) {
                //跳转到开通会员接口
                // setMemberLevelOnline({ orderId: that.orderId }).then(res=>{
                //   let status=res.data.data.member_status || 0
                //   that.$router.push(
                //     { name: 'paymentVipStatus', query: { status: status }}
                //   );
                // })
                that.$router.push({
                  name: 'paymentVipStatus',
                  query: { status: 1 },
                });
              } else {
                that.$router.push({
                  name: 'paymentStatus',
                });
              }
            }
          }
        );
      });
    },
    // pay() {
    //   Dialog.alert({
    //     message: '你选择了' + (this.payWay === 'wx' ? '微信支付' : '支付宝支付')
    //   }).then(() => {
    //     // 调用微信支付
    //     orderPrepay({orderId: this.orderId}).then(res => {
    //       this.$router.push({
    //       name: 'paymentStatus',
    //       params: {
    //         status: 'success',
    //         appId:res.data.data.appId,
    //         timeStamp:res.data.data.timeStamp,
    //         nonceStr:res.data.data.nonceStr,
    //         packageValue:res.data.data.packageValue,
    //         signType:res.data.data.signType,
    //         paySign:res.data.data.paySign
    //       }
    //       });
    //     });
    //   });
    // }，
  },

  components: {
    [Radio.name]: Radio,
    [RadioGroup.name]: RadioGroup,
    [Dialog.name]: Dialog,
  },
};
</script>

<style lang="scss" scoped>
/deep/ .van-radio__icon--checked .van-icon {
  color: #fff;
  background-color: #07c160;
  border-color: #07c160;
}
.payment_group {
  margin-bottom: 10px;
}

.time_down {
  background-color: #fffeec;
  padding: 10px 15px;
}

.pay_submit {
  position: fixed;
  bottom: 0;
  width: 100%;
  font-size: 16px;
}

.pay_way_group img {
  vertical-align: middle;
}

.pay_way_title {
  padding: 15px;
  background-color: #fff;
}
</style>
